[前端开发Vue]在Axios中,怎么实现实时监听上传数据进度、监听接口返回数据进度、如何终止网络请求。实现上传文件实时进度条以及下载文件实时进度条。 | 您所在的位置:网站首页 › vue 实时监听 › [前端开发Vue]在Axios中,怎么实现实时监听上传数据进度、监听接口返回数据进度、如何终止网络请求。实现上传文件实时进度条以及下载文件实时进度条。 |
1. Axios的本质
Axios的本质是XHR的promise封装,所以XHR的一些函数对它也同样适用。
2. 如何监听上传数据的实时进度
// 涉及函数onUploadProgress
// 形参: event
// 函数作用:请求接口上传的过程中会不停的调用onUploadProgress函数
axiox({
url: 'api/XXX',
method: 'post',
onUploadProgress: function (e) {
console.log('e:',e);
}
})
观察一下console.log输出的内容如下: 可以从上面看出来,在上传的过程中,会不停的多次的调用onUploadProgress函数,其中里面的total为本次上传的总数据大小,loaded为本次上传已上传了多少数据。 so!我们就要用到我们无比高贵的小学数学,已知…求…还好小学毕业多年的我数学功底还在,所以!showTime我的算法! const onUploadProgress = (e) => { const progress = Math.floor( (e.loaded / e.total) * 100, ); };果然不出我所料,我成功用高端的算法计算出了进度! 3. 如何实时监听下载数据的进度Wait a minute! 你们是不是又觉得我在水字数了?没错!看人真准! // 函数 onDownLoadProgress axiox({ url: 'api/XXX', method: 'post', onDowbloadProgress: function (e) { console.log('e:',e); } })结果如下 其中loaded还是已经下载了的数据大小,至于总数据大小,需要后端提供,可以写在响应头中!伟大的算法就不展示第二次了,已下载数据/总数据大小,即可获得进度! 4. 如何终止网络请求。首先,我们要知道axios中,config参数中有一个用于终止请求的方法 上图字面意思就是创建一个实例,里面包括该请求的终止方法和该请求的token。当我们需要终止网络请求时,调用该实例的cancel()方法即可。 // 创建一个token令牌 tips:axios.CancelToken.source()方法是axios内置创建取消请求的方法 const cancelToken = axios.CancelToken.source() // 此时,新建一个axios请求,并把该令牌赋值给confi axios.get('XXX/XXX', { cancelToken }); // 当我们需要终止该请求时 cancelToken.cancel(); |
CopyRight 2018-2019 实验室设备网 版权所有 |